<template>
  <div>
    <el-row class="da_box">
      <el-form :model="deptForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-col :span="11">
          <el-form-item label="工程名" prop="name">
            <el-input v-model="deptForm.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="负责人" prop="leader">
            <el-input v-model="deptForm.leader" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="经度" prop="latitude" class="txt">
            <el-input v-model="deptForm.latitude" autocomplete="off" disabled></el-input>
          </el-form-item>
          <el-form-item label="纬度" prop="longitude" class="txt">
            <el-input v-model="deptForm.longitude" autocomplete="off" disabled></el-input>
          </el-form-item>
          <el-form-item label="省会" prop="province" class="txt">
            <el-input v-model="deptForm.province" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="缩放级别" prop="scale" class="txt">
            <el-input v-model="deptForm.scale" autocomplete="off" disabled></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="phone" class="txt">
            <el-input v-model="deptForm.phone" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="邮箱:" prop="email">
            <el-input v-model="deptForm.email" autocomplete="off"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="1">
          <div style="height:500px;overflow: hidden ">
            <div id="container" style="height: 550px"></div>
          </div>
        </el-col>
      </el-form>
    </el-row>

    <div slot="footer" class="dialog-footer box2">
      <el-button @click="$emit('close-dialog',false)">取 消</el-button>
      <el-button type="primary" @click="submitDeptForm">确 定</el-button>
    </div>
  </div>


</template>

<script>
import request from "@/utils/request";

export default {
  name: "AddDept",
  props: {
    id: {
      default: 0,
      required: true,
      type: Number
    }
  },
  data() {
    return {
      map:null,
      //用于清除上一个标记点的数据
      previousMarker:null,
      //存储上一次的缩放级别
      previousZoomLevel:null,
      dialogFormVisible: false,
      // 新增的弹框
      deptForm: {latitude:0,longitude:0,scale:0},
      rules: {
        name: [
          {required: true, message: '请输入部门名', trigger: 'blur'},
        ],
        leader: [
          {required: true, message: '请输入负责人', trigger: 'blur'},
          {min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'}
        ],
        email: [
          {required: true, message: '请输入邮箱', trigger: 'blur'},
        ],
        phone: [
          {required: true, message: '请输入联系电话', trigger: 'blur'},
          {min: 11, max: 11, message: '长度在11个字符', trigger: 'blur'}
        ],
        latitude: [
          {required: true, message: '请输入经度', trigger: 'blur'},
        ],
        longitude: [
          {required: true, message: '请输入维度', trigger: 'blur'},
        ],
        scale: [
          {required: true, message: '请输入缩放级别', trigger: 'blur'},
        ],
        province: [
          {required: true, message: '请输入省会', trigger: 'blur'},
        ],
      },
    }
  },

  async mounted() {
    if (this.id) {
      this.deptForm = await request(`dept/${this.id}`)
      this.map = new AMap.Map("container", {
        center: [this.deptForm.longitude, this.deptForm.latitude],
        zoom: this.deptForm.scale,
      });

      let marker = new AMap.Marker({
        icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
        position: [this.deptForm.longitude, this.deptForm.latitude],
        offset: new AMap.Pixel(-13, -30)
      });
      marker.setMap(this.map);


      this.map.on('click', this.showInfoClick);
    }else {
      this.map = new AMap.Map("container", {
        zoom: 10,
      });
      this.map.on('click', this.showInfoClick);
    }


  },


  methods: {

    showInfoClick(e) {

      //console.info("当前缩放级别"+this.map.getZoom())
      this.deptForm.latitude = e.lnglat.getLat();//经度
      //console.info("this.deptForm.latitude"+e.lnglat.getLat())
      this.deptForm.longitude = e.lnglat.getLng();//纬度
      this.deptForm.scale=this.map.getZoom();

      if (this.previousMarker) {
        this.map.remove(this.previousMarker); // 从地图上移除先前的标记点
      }

      // 存储当前的缩放级别
      this.previousZoomLevel = this.map.getZoom();
      let id=this.deptForm.id
      let myIcon="//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png"
      if (id){
          myIcon='//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png'
      }
      let marker = new AMap.Marker({

        icon: myIcon,
        position: [this.deptForm.longitude, this.deptForm.latitude],
        // offset: new AMap.Pixel(-13, -30)
        offset: new AMap.Pixel(-26,-60)
      });
      marker.setMap(this.map);
      this.previousMarker = marker; // 存储对新标记点的引用

      // 恢复之前的缩放级别
      this.map.setZoom(this.previousZoomLevel);
    },
    async submitDeptForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          request("dept", this.deptForm.id ? "PUT" : "POST", this.deptForm).then(() => {
            this.$message.success("编辑成功")
            this.$emit('close-dialog', true)
          }).catch(() => {
            this.$message.error("编辑失败")
          })
        } else {
          return false;
        }
      });
    },
  }
}

</script>

<style scoped>

.txt {
  margin-right: 10px;
}

.box2 {
  margin-top: 10px;
  text-align: center;
}
#container{
  width: 100%;
  height: 400px;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
</style>